@import 'rem';
.msgDialogWrap{
  position: fixed;
  width: 100%;
  .px2rem(height,150);
  top:35%;
  text-align: center;

  .msgDialogMask{
    .px2rem(height,150);
    .px2rem(width,150);
    margin: 0 auto;
    background: #000;
    opacity: 0.6;
    border-radius: 8px;
  }
  .msgDialogIcon{
    position: absolute;
    width: 100%;
    .px2rem(top,28);
    .px2px(font-size,54);
    color: #fff;
  }
  .icon-adopt{
    color: #00ca5a;
  }
  .icon-no{
    color: #FF4E5B;
  }
  .msgDialogTitle{
    position: absolute;
    width: 100%;
    .px2rem(bottom,17);
    .px2px(font-size,14);
    .px2rem(line-height,19);
    color: #fff;
  }
}
.toastWrap {
  position: absolute;
  z-index: 99;
  top: 40%;
  width: 100%;
  word-wrap: break-word;
}
.toastWrap .toastTitle {
  .px2rem(max-width,360);
  margin: 0 auto;
  .px2rem(padding, 42);
  text-align: center;
  background: #000;
  .px2rem(line-height,50);
  border-radius: 30px;
  background: rgba(0, 0, 0, 0.8);
  word-wrap: break-word;
  .px2px(font-size,32);
  color: #fff;
}
.toastBreakWrap{
  position: absolute;
  z-index: 10;
  top: 50%;
  width: 100%;
  .toastBreak{
    .px2rem(width,400);
    .px2rem(height,180);
    margin: 0 auto;
    text-align: center;
    background: #000;
    border-radius: 8px;
    opacity: 0.7;
    .px2px(font-size,32);
    color: #fff;
  }

  .toastTop{
    .px2rem(padding-top,20);
  }
}

.dialogwrap{
  position: absolute;
  top: 0px;
  z-index: 200;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.4);
  color:#333;
  .px2px( font-size,32);
  .dialoginnerwrap{
    //position: relative;
    width: 85%;
    border-radius: 6px;
    background: #fff;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
    //transition: 1s width ease-in;
    //margin-top: 143px;
    .dialogcontent{
      text-align: center;
      color: #292F33;
      .px2rem(padding-bottom,100);
      .px2rem(padding-top,32);
      .px2rem(padding-left,32);
      .px2rem(padding-right,32);
    }
    .dialog-tip {
      display: table;
      width: 100%;
      position: absolute;
      bottom: 0px;
      border-top:1px solid #DFE7EC;
      div {
        line-height: 50px;
        display: table-cell;
        width: 50%;
        text-align: center;
        height: 50px;
        &:nth-child(2){
          color: #1890FF;
        }
      }

    }
    .msg-dialogbuttonwrap{
      &:before{
        content: "";
        width: 100%;
        height: 1px;
        position: absolute;
        left: 0px;
        background: #DFE7EC;
      }

      display: table;
      width: 100%;
      position: absolute;
      bottom: 0px;
      div{
        .px2rem(line-height,80);
        display: table-cell;
        width: 100%;
        text-align: center;
        .px2rem(height,80);
        color: #F76A75;

      }
    }
    .dialogbuttonwrap{
        &:before{
          content: "";
          width: 100%;
          height: 1px;
          position: absolute;
          left: 0px;
          background: #DFE7EC;
        }
      &:after{
        content: "";
        width: 1px;
        height: 100%;
        position: absolute;
        background: #DFE7EC;
        top: 0px;
        left: 50%;
      }
      display: table;
      width: 100%;
      position: absolute;
      bottom: 0px;
      div{
        .px2rem(line-height,80);
        display: table-cell;
        width: 50%;
        text-align: center;
        .px2rem(height,80);
        &:nth-child(2){
          color: #1890FF;
        }
      }
    }
  }

  .titleDialog{
    width: 75%;
    border-radius: 6px;
    background: #fff;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

    .dialog-title{
      color: #000000;
      .px2px(font-size,32);
      text-align: center;
      .px2rem(padding-top,66);
    }
    #dialog-left{
      color: #FA6771 !important;
    }
    #dialog-right{
      color: #000000 !important;
    }
    .dialogcontent{
      color: #8899A6;
      .px2px(font-size,28);
      .px2rem(padding-bottom,130);
      .px2rem(padding-top,20);
    }
  }

  .confirm-popup{
    width: 75%;
    border-radius: 10px;
    background: #fff;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);

    .confirm-content{
      .px2rem(padding-top,80);
      .px2rem(padding-bottom,20);
      .px2rem(padding-left,30);
      .px2rem(padding-right,30);
      text-align: center;
    }
    .confirm-tips{
      text-align: center;
      .px2px(font-size,28);
      .px2rem(padding-left,30);
      .px2rem(padding-right,30);
      color: #8899A6;
      font-weight: 100;
    }
    .confirm-button{
      .px2rem(margin-top,50);

      #button-left,#button-right{
        text-align: center;
        display: inline-block;
        width: 50%;
        border-top: 1px solid #d0cece;
        .px2rem(height,90);
        .px2rem(line-height,90);
        .px2px(font-size,32);
      }
      #button-left{
        border-right: 1px solid #d0cece;
      }
      .button-sure{
        color: #FA6771;
      }
    }
  }
}
